<template>
  <div class="form-wrapper">
    <hts-form :columns="formColumn" :options="formOptions" row="3" button-cancel-text="aasdf" @submit="handleSubmit">
      sadfasdf
    </hts-form>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      formColumn: [
        { type: 'title', prop: 'title', label: '标题分段' },
        { type: 'input', prop: 'input', label: '普通输入框', value: 'adsf' },
        { type: 'email', prop: 'email', label: '电子邮箱' },
        { type: 'phone', prop: 'phone', label: '电话号码' },
        { type: 'number', prop: 'number', label: '数字输入', option: 'status' },
        { type: 'password', prop: 'password', label: '密码输入' },
        { type: 'time', prop: 'time', label: '时间输入' },
        { type: 'date', prop: 'date', label: '日期输入' },
        { type: 'datetime', prop: 'datetime', label: '日期时间' },
        { type: 'color', prop: 'color', label: '主体状态', option: 'status' },
        { type: 'radio', prop: 'radio', label: '单选框', option: 'status', value: 1 },
        { type: 'select', prop: 'select', label: '下拉选择', option: 'business' },
        { type: 'region', prop: 'region', label: '三级联动', option: 'business' },
        { type: 'checkbox', prop: 'checkbox', label: '复选框', option: 'business', value: [] },
        { type: 'cascader', prop: 'cascader', label: '级联选择', option: 'list' },
        { type: 'datetimerange', prop: 'datetimerange', label: '日期范围' },
        { type: 'timerange', prop: 'timerange', label: '时间范围' },
        { type: 'switch', prop: 'switch', label: '选择器' },
        { type: 'textarea', prop: 'textarea', label: '文本格式', row: 1 },
        { type: 'richtext', prop: 'richtext', label: '营业面积', row: 1 },
        { type: 'image', prop: 'image', label: '门头图片', row: 1, extra: { menu: 'default' } },
        { type: 'file', prop: 'file', label: '附件上传', row: 1, extra: { menu: 'default' } }
      ],
      formOptions: {
        status: [{ value: 1, label: '男' }, { value: 2, label: '女' }],
        business: [{ value: 1, label: '男' }, { value: 2, label: '女' }],
        list: [
          {
            value: 1,
            label: '男',
            children: [{ value: 3, label: '男' }, { value: 4, label: '女' }]
          },
          { value: 2, label: '女' }
        ]
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 加载数据
    getData() {},
    handleSubmit(data) {
      console.log(data);
    }
  }
};
</script>

<style lang="scss" scoped>
.form-wrapper {
  width: 80%;
  padding: 30px;
  margin: 60px auto;
  box-shadow: 0 0 20px rgba($color: #000000, $alpha: 0.2);
  background-color: #fff;
}
</style>
